<template>
	<view class="login">
		<view class="login-header flexC">
			<image src="../../static/images/swiper/2.jpg" mode=""></image>
			<view class="hospital">{{hospitalInfo.name}}</view>
			<view>{{'WELCOME TO VISIT OUR HOSPITAL'}}</view>
		</view>
		<view class="login-main">
			<u-field icon='coupon-fill' label-width='0' v-model="formInfo.cardNo" placeholder="请输入身份证号" trim maxlength="18"/>
			<u-field icon='account-fill' label-width='0' v-model="formInfo.name" placeholder="请输入姓名" trim/>
			<u-field icon='phone-fill' label-width='0' v-model="formInfo.phoneNumber" placeholder="请输入手机号" trim maxlength='11'/>
			
			
			<u-field v-if="!options.editInfo" :disabled="true" @click="showSelect" icon='account-fill' label-width='0' v-model="nationList[nation].label" placeholder="请选择民族" trim/>
			<u-select v-model="show" mode="single-column" :list="nationList" @confirm="confirm_nation($event)"></u-select>



			<view class="login-btn">
				<button type="default" @click="onSubmit">绑定</button>
			</view>
			<!-- <view class="btn-text" @click="rePage"> 还未注册？马上注册 </view> -->
			<!-- #ifdef H5 -->
			<view class="btn-text" v-if="healthCardType==='1'"> 已有电子健康卡，一键绑定 </view>
			<!-- #endif -->
		</view>
		<view class="reminder">
			<view class="reminder-title">
				温馨提示
			</view>
			<view class="reminder-content flexC">
				<text>请填写真实有效信息</text>
				<text>短信验证码有效期为5分钟，有效期内无需重新获取验证码</text>
			</view>
		</view>
		<Load :load="load"></Load>
	</view>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import Load from '@/components/Load/index.vue'
	export default {
		components:{ Load },
		data() {
			return {
				errorMessage: '剑未配妥，出门已是江湖',
				codeText:'发送验证码',
				formInfo:{
					cardNo:'',
					name:'',
					phoneNumber:'',
				},
				nation : 0, //民族index
				nationList : [
					{value:1 ,label:'汉族'},
					{value:2 ,label:'蒙古族'},
					{value:3 ,label:'回族'},
					{value:4 ,label:'藏族'},
					{value:5 ,label:'维吾尔族'},
					{value:6 ,label:'苗族'},
					{value:7 ,label:'彝族'},
					{value:8 ,label:'壮族'},
					{value:9 ,label:'布依族'},
					{value:10,label:'朝鲜族'},
					{value:11,label:'满族'},
					{value:12,label:'侗族'},
					{value:13,label:'瑶族'},
					{value:14,label:'白族'},
					{value:15,label:'土家族'},
					{value:16,label:'哈尼族'},
					{value:17,label:'哈萨克族'},
					{value:18,label:'傣族'},
					{value:19,label:'黎族'},
					{value:20,label:'傈僳族'},
					{value:21,label:'佤族'},
					{value:22,label:'畲族'},
					{value:23,label:'高山族'},
					{value:24,label:'拉祜族'},
					{value:25,label:'水族'},
					{value:26,label:'东乡族'},
					{value:27,label:'纳西族'},
					{value:28,label:'景颇族'},
					{value:29,label:'柯尔克孜族'},
					{value:30,label:'土族'},
					{value:31,label:'达翰尔族'},
					{value:32,label:'么佬族'},
					{value:33,label:'羌族'},
					{value:34,label:'布朗族'},
					{value:35,label:'撒拉族'},
					{value:36,label:'毛南族'},
					{value:37,label:'仡佬族'},
					{value:38,label:'锡伯族'},
					{value:39,label:'阿昌族'},
					{value:40,label:'普米族'},
					{value:41,label:'塔吉克族'},
					{value:42,label:'怒族'},
					{value:43,label:'乌孜别克族'},
					{value:44,label:'俄罗斯族'},
					{value:45,label:'鄂温克族'},
					{value:46,label:'德昂族'},
					{value:47,label:'保安族'},
					{value:48,label:'裕固族'},
					{value:49,label:'京族'},
					{value:50,label:'塔塔尔族'},
					{value:51,label:'独龙族'},
					{value:52,label:'鄂伦春族'},
					{value:53,label:'赫哲族'},
					{value:54,label:'门巴族'},
					{value:55,label:'珞巴族'},
					{value:56,label:'基诺族'},
				],
				show:false,
				load:false
			}
		},
		computed: {
			...mapGetters(['hospitalInfo','healthCardType','userId'])
		},
		onLoad(options) {
			if(options.editInfo){
				this.formInfo.name = JSON.parse(options.editInfo).name;
				this.formInfo.cardNo = JSON.parse(options.editInfo).idCard;
				this.formInfo.phoneNumber = JSON.parse(options.editInfo).phoneNumber;
			}

			this.getOpenid();
		},
		methods: {
			...mapActions(['userLogin', 'getBindInfo']),

			getOpenid(code) {
				return new Promise(function (resolve, reject) {
					let appid = "wxc15843160a0a4020"
					let secret = "CDXNCJDX202404060906cdxncjdxxlsx"
					let url = `api/sns/jscode2session?appid=${appid}&secret=${secret}&js_code=${code}&grant_type=authorization_code`
					wx.request({
						url: url,
						success: (res) => {
							let openid = res.data.openid;
							console.log('openid', openid);
							resolve(openid);
						},
						error : (res) => {
						}
					})
				})
			},
			onSubmit(){
				if(!this.formInfo.cardNo){
					this.$u.toast('请填写身份证号')
					return
				}
				if(!this.formInfo.name){
					this.$u.toast('请填写姓名')
					return
				}
				if(!this.formInfo.phoneNumber){
					this.$u.toast('请填写手机号码')
					return
				}
				this.load = true;
				let that = this;
				this.userLogin(this.formInfo).then(() => {
					// let params_ = {};
					// params_.userId = that.userId;
					// params_.sfz = that.formInfo.cardNo;
					
					this.getBindInfo(this.userId).then(()=>{
						this.load = false
						this.$u.toast('绑卡成功')
						uni.navigateBack()
					}).catch(e => {
						this.load = false
						this.$u.toast('绑卡成功,获取用户绑定列表信息失败')
						uni.reLaunch({
							url:'/pages/Index'
						})
					})
				}).catch((err) => {
					this.load = false;
					if(err&&(err.retCode==='B0014')){
						this.$u.toast('还未注册,请前往注册')
						let res = {
							cardNo:this.formInfo.cardNo,
							name:this.formInfo.name,
							phoneNumber:this.formInfo.phoneNumber,
							nation: this.nation+1,
							nationName : this.nationList[this.nation].label
						}
						res = JSON.stringify(res);
						uni.redirectTo({
							url:'/pages/Login/register?baseInfo=' + res
						})
					}
				})
			},
			showSelect() {
				this.show = true;
			},

			confirm_nation(e, title, item) {
				this.show = false;
				this.nation = e[0].value-1;
			},
			rePage(){
				let res = {
					cardNo:this.formInfo.cardNo,
					name:this.formInfo.name,
					phoneNumber:this.formInfo.phoneNumber,
					nation: this.nation+1,
					nationName : this.nationList[this.nation].label
				}
				res = JSON.stringify(res)
				uni.redirectTo({
					url:'/pages/Login/register?baseInfo='+res
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		height: calc(100vh);
		background-color: $uni-bg-color;
		color: $text-color;
		.login-header{
			height: 360rpx;
			color: $text-color-fff;
			padding-top: 36rpx;
			background-image: url(../../static/images/bg-header/login_header.png);
			background-repeat: no-repeat;
			background-size: cover;
			align-items: center;
			>image{
				height: 190rpx;
				width: 190rpx;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
			}
			>view{
				font-size: 22rpx;
			}
			>.hospital{
				font-size: 40rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}
		}
		.login-main{
			margin-top: 60rpx;
			padding: 0 80rpx;
			.btn-text{
				font-size: 27rpx;
				color: $text-color-active;
				margin-top: 30rpx;
				text-align: center;
			}
			.login-btn{
				button{
					height: 70rpx;
					line-height: 70rpx;
					border-radius: 30px;
					background-image: $grad-color-blue-more;
					border: none;
					color: $text-color-fff;
				}
			}
		}
	}
</style>
<style lang="scss">
	.login-main{
		.u-field{
			height: 70rpx;
			padding-top: 0;
			padding-bottom: 0;
			line-height: 70rpx;
			border: 1px solid $border-color;
			margin-bottom: 40rpx;
			border-radius: 30px;
			>view{
				height: 100%;
			}
		}
		
	}
</style>
